const setting = {
	dMin: 2,
	dMax: 14,
	fontSize: 18,
	streamNum: 20,
	fps: 20,
	moreColor: 'false'
}

const colorH = [10, 40, 70, 110, 140, 170, 200, 230, 240, 270, 300, 330]//色相

const langs = [
	"Hello World",
	"مرحبا بالعالم",
	"Salam Dünya",
	"Прывітанне Сусвет",
	"Здравей свят",
	"ওহে বিশ্ব",
	"Zdravo svijete",
	"Hola món",
	"Kumusta Kalibutan",
	"Ahoj světe",
	"Helo Byd",
	"Hej Verden",
	"Hallo Welt",
	"Γειά σου Κόσμε",
	"Hello World",
	"Hello World",
	"Hola Mundo",
	"Tere, Maailm",
	"Kaixo Mundua",
	"سلام دنیا",
	"Hei maailma",
	"Bonjour le monde",
	"Dia duit an Domhan",
	"Ola mundo",
	"હેલો વર્લ્ડ",
	"Sannu Duniya",
	"नमस्ते दुनिया",
	"Hello World",
	"Pozdrav svijete",
	"Bonjou Mondyal la",
	"Helló Világ",
	"Բարեւ աշխարհ",
	"Halo Dunia",
	"Ndewo Ụwa",
	"Halló heimur",
	"Ciao mondo",
	"שלום עולם",
	"こんにちは世界",
	"Hello World",
	"Გამარჯობა მსოფლიო",
	"Сәлем Әлем",
	"សួស្តី​ពិភពលោក",
	"ಹಲೋ ವರ್ಲ್ಡ್",
	"안녕하세요 월드",
	"Ciao mondo",
	"ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ",
	"Labas pasauli",
	"Sveika pasaule",
	"Hello World",
	"Kia Ora",
	"Здраво свету",
	"ഹലോ വേൾഡ്",
	"Сайн уу",
	"हॅलो वर्ल्ड",
	"Hai dunia",
	"Hello dinja",
	"မင်္ဂလာပါကမ္ဘာလောက",
	"नमस्कार संसार",
	"Hallo Wereld",
	"Hei Verden",
	"Moni Dziko Lapansi",
	"ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ",
	"Witaj świecie",
	"Olá Mundo",
	"Salut Lume",
	"Привет, мир",
	"හෙලෝ වර්ල්ඩ්",
	"Ahoj svet",
	"Pozdravljen, svet",
	"Waad salaaman tihiin",
	"Përshendetje Botë",
	"Здраво Свете",
	"Lefatše Lumela",
	"Halo Dunya",
	"Hej världen",
	"Salamu, Dunia",
	"ஹலோ வேர்ல்ட்",
	"హలో వరల్డ్",
	"Салом Ҷаҳон",
	"สวัสดีชาวโลก",
	"Kamusta Mundo",
	"Selam Dünya",
	"Привіт Світ",
	"ہیلو ورلڈ",
	"Salom Dunyo",
	"Chào thế giới",
	"העלא וועלט",
	"Mo ki O Ile Aiye",
	"你好，世界",
	"你好，世界",
	"你好，世界",
	"Sawubona Mhlaba"
];

const stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.dom)

const gui = new dat.GUI({ width: 320 })
const folder = gui.addFolder('基础')
folder.open()
const controller1 = folder.add(setting, 'dMin', 1, 4, 1)
const controller2 = folder.add(setting, 'dMax', 5, 14, 1)
const controller3 = folder.add(setting, 'fontSize', 5, 26, 1)
const controller4 = folder.add(setting, 'streamNum', 5, 144, 1)
const controller5 = folder.add(setting, 'fps', 20, 60, 1)
const controller6 = folder.add(setting, 'moreColor', ['true', 'false'])


function controllerGroups() {
	[controller1, controller2, controller3, controller4, controller5,controller6].forEach((controller) => {
		controller.onFinishChange(() => {
			initStreams()
			setup()
		})
	})
}

controllerGroups()

function Char(char, x, y, colorH) {
	this.char = char
	this.x = x
	this.y = y
	this.colorH = colorH

	this.draw = () => {
		flashEffect({ colorH: this.colorH, char: this.char, x: this.x, y: this.y })
	}

	this.update = (y) => {
		this.y = y
	}
}

function flashEffect({ colorH, char, x, y }) {
	const sign = random(100)
	// 10%的可能,该字符为数字
	if (sign < 10) {
		text(floor(random(10)), x, y)
	} else {
		text(char, x, y)
	}
	fill(colorH, 100, 100);//深色
	//30%的可能,该字符变色
	if (sign < 30) {
		fill(colorH, 30, 100);//淡色
	}
}

function Stream() {
	this.chars = []
	this.x = floor(random(innerWidth))
	this.dy = floor(random(setting.dMin, setting.dMax))
	this.y = -400//文字最长不要超过400px,不然穿过底部时会闪现到上面
	this.colorH = setting.moreColor=='true' ? random(colorH) : 120

	this.resetStream = () => {
		this.chars = []
		random(langs).split('').forEach((item, index) => {
			//canvas不提供直接设置竖排文字,所以需要手动确定y坐标
			const char = new Char(item, this.x, this.y + index * setting.fontSize, this.colorH)
			this.chars.push(char)
		})
		this.x = random(innerWidth)
		this.dy = ceil(random(setting.dMin, setting.dMax))
	}

	this.resetStream()

	this.update = () => {
		this.y += this.dy
		this.chars.forEach((item, index) => {
			item.update(this.y + index * setting.fontSize + this.dy)
			item.draw()
		})
		//碰壁更新内容与位置
		if (this.y > innerHeight) {
			this.y = -400
			this.resetStream()
		}
	}
}

let streams = []

function initStreams() {
	streams = []
	for (let i = 0; i < setting.streamNum; i++) {
		const stream = new Stream()
		streams.push(stream)
	}
}

let img
function preload() {
	img = loadImage('../images/death-stranding.jpeg')
}

function setup() {
	createCanvas(innerWidth, innerHeight)
	frameRate(setting.fps)
	textSize(setting.fontSize);
	textStyle(BOLD);
	colorMode(HSB)
	noStroke();
	textFont("monospace");
	background(0);
	initStreams()
}

function draw() {
	stats.begin()
	// clear()
	// imageMode(CENTER)
	image(img,0,0)
	background(0, 0.5)
	streams.forEach(item => {
		item.update()
	})
	stats.end()
}

function windowResized() {
	resizeCanvas(innerWidth, innerHeight);
	initStreams()
	background(0)
}